{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/vip.css' %}">
{% endblock %}


{% block content %}
    <div class="top-box">
        <div class="vip-logo">
            <span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
        </div>
        <div class="vip-info">
            <div class="title">5xClass - IT自学百年大会员</div>
            <div class="text"><span class="glyphicon glyphicon-gift" aria-hidden="true"></span> 会员介绍</div>
        </div>
    </div>

    <div class="top-list">
        <div class="right-info">
            <h3>会员权益</h3>
            <ul>
                <li>百年会员为5xClass平台最高权益会员</li>
                <li>会员有效期为100年</li>
                <li>注册成为会员后，平台所有课程均可观看</li>
                <li>会员为一次性收费，没有二次付费</li>
                <li>课程持续更新，会员价格涨价，不影响已经购买的会员</li>
            </ul>
        </div>
        <div class="pay-info">
            <div class="buy">
                <span class="origin-price">原价:¥599</span>
                <span class="present-price"><i>折</i>￥{{ amount }}</span>
                {% if user_object.user_type != 1 %}
                    <form method="post">
                        {% csrf_token %}
                        <button type="submit" class="buy-btn">开通会员</button>
                    </form>
                {% endif %}
            </div>

            {% if user_object.user_type != 1 %}
                <ul class="pay-type">
                    <li class="payment active">
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/zfb_1564141046.0915222.svg"
                             alt="">
                        <span>支付宝</span>
                    </li>
                    <li class="payment">
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/wx_1564141045.9807134.svg" alt="">
                        <span style="color: #c4c4c4">微信（未开通）</span>
                    </li>
                </ul>
            {% else %}
                <div class="alert alert-success" role="alert">恭喜您，VIP会员已开通，去学习吧！</div>
            {% endif %}
        </div>
    </div>
    <div class="panel panel-default qa">
        <div class="panel-heading">会员常见问题</div>
        <div class="panel-body">
            <div class="qa-item">
                <div class="qa-header">
                    <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                    <p>关于5xClass</p>
                </div>
                <div class="qa-body">
                    5xClass自学平台是由 <span style="font-weight: bold">武沛齐</span> 老师创办，为学员提供优质的IT自学教程。
                    核心内容包含：Python开发、爬虫JS逆向、安卓APP逆向、自动化办公、数据分析等。
                    <div class="qrcode">
                        <div>
                            <img src="{% static 'images/抖音-武沛齐2.jpg' %}"/>
                            <p>抖音</p>
                        </div>
                        <div>
                            <img src="{% static 'images/微信888.jpg' %}"/>
                            <p>微信</p>
                        </div>
                        <div>
                            <img src="{% static 'images/B站.jpg' %}"/>
                            <p>B站</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="qa-item">
                <div class="qa-header">
                    <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                    <p>已购买会员，是否支持退款？</p>
                </div>
                <div class="qa-body">
                    开通会员后，3天内有任何不满意支持全额退款（联系客服）。
                </div>
            </div>
            <div class="qa-item">
                <div class="qa-header">
                    <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                    <p>会员技术交流群</p>
                </div>
                <div class="qa-body">
                    开通会员后，平台专门给大家提供了技术交流群，探讨技术难题和交流学习方法，联系客服或找助理老师邀请进入交流群。
                </div>
            </div>
            <div class="qa-item">
                <div class="qa-header">
                    <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                    <p>课程是否会更新？</p>
                </div>
                <div class="qa-body">
                    技术更新迭代非常快，我们的课程也会不断持续更新，同时也会根据学员反馈对课程内容进行调整和迭代。
                    如果你还有其他好的想法，可以在永久会员交流群内向我们提需求和建议，我们会尽力优化。
                </div>
            </div>

            <div class="qa-item">
                <div class="qa-header">
                    <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                    <p>会员能否共享账号？</p>
                </div>
                <div class="qa-body">
                    5xClass严禁任何共享账号或二次售卖账号，平台新增账号冲突和检测功能，并且申请了内容版权保护。如果发现有违规情况，会自动化取消会员权益且不予退款。
                </div>
            </div>

        </div>
    </div>
{% endblock %}